<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="new/css/global.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style lang="less" scoped>
        .home-container {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .el-header {
            background-color: #373d41;
            display: flex;
            justify-content: space-between;
            padding-left: 0;
            align-items: center;
            color: #fff;
            font-size: 20px;
        }

        .el-aside {
            background-color: #333744;
        }

        .el-main {
            background-color: #eaedf1;
        }

        .iconfont {
            margin-right: 10px;
        }

        .toggle-button {
            background-color: #4a5064;
            font-size: 10px;
            line-height: 24px;
            color: #fff;
            text-align: center;
            letter-spacing: 0.2em;
            cursor: pointer;
        }
        /* 在引入的css文件中写入这个*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div class="app" id="ServeType" v-cloak>
    <el-container  class="home-container">
        <el-header>
            <div>
                <img src="" alt="">
                <span>I家政后台管理</span>
            </div>
            <el-menu type="info"
                     :default-active="activeIndex2"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect"
                     background-color="#373d41"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-s-custom"></i>我的工作台</template>
                    <el-menu-item index="2-1" @click="logout"><i class="el-icon-remove"></i>退出</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width="'210px'">
                <!-- 侧边栏菜单区域 -->
                <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened
                         :collapse="isCollapse"
                         :collapse-transition="false"
                         :default-active="activePath">
                    <!-- 一级菜单 -->
                    <template  v-for="item in menuList">
                        <el-submenu v-if="item.children.length > 0" :index="item.id + ''" :key="item.id">
                            <!-- 一级菜单的模板区域 -->
                            <template slot="title">
                                <!-- 文本 -->
                                <span>{{item.menuName}}</span>
                            </template>

                            <!-- 二级菜单 -->
                            <el-menu-item v-if="item.children" :index="subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState(subItem.path)">
                                <template slot="title">
                                    <!-- 图标 -->
                                    <i class="el-icon-menu"></i>
                                    <!-- 文本 -->
                                    <span>{{subItem.menuName}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else  :index="item.path" :key="item.id" @click="saveNavState(item.path)">
                            <!-- 一级菜单的模板区域 -->
                            <template slot="title">
                                <!-- 文本 -->
                                <span>{{item.menuName}}</span>
                            </template>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-aside>
            <!-- 右侧内容主体 -->
            <el-main>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/AdminIndex.html' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                    <el-breadcrumb-item>类型管理</el-breadcrumb-item>
                </el-breadcrumb>

                <!-- 卡片视图 -->
                <el-card>
                    <!-- 添加角色按钮区域 -->
                    <el-row>
                        <el-col>
                            <el-button type="primary" @click="dialogFormVisible=true">添加类型</el-button>
                        </el-col>
                    </el-row>

                    <!-- 角色列表区域 -->
                    <el-table :data="typeList" border stripe size="small">
                        <!-- 展开列 -->
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <el-row :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']" v-for="(item1, i1) in scope.row.children" :key="item1.id">
                                    <!-- 渲染一级权限 -->
                                    <el-tag closable @close="removeTypeById(item1.id)">{{item1.typeName}}</el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </el-row>
                                <!-- <pre>
                                  {{scope.row}}
                                </pre> -->
                            </template>
                        </el-table-column>
                        <!-- 索引列 -->
                        <el-table-column type="index" label="序号"></el-table-column>
                        <el-table-column label="类型名称" prop="typeName"></el-table-column>
                        <el-table-column label="类型描述" prop="typeDesc"></el-table-column>
                        <el-table-column label="操作" width="300px">
                            <template slot-scope="scope">
                                <el-button @click="removeTypeById(scope.row.id)" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
    <el-dialog title="类型" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="父类型" label-width="120px" >
                <el-select v-model="form.parentId" placeholder="请选择父类型">
                    <el-option key="0" label="/" value="0"></el-option>
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.typeName"
                            :value="item.id" >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型名称" label-width="120px">
                <el-input v-model="form.typeName" autocomplete="请输入类型名称"></el-input>
            </el-form-item>
            <el-form-item label="类型描述" label-width="120px">
                <el-input v-model="form.typeDesc" autocomplete="请输入类型描述"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addType">确 定</el-button>
        </div>
    </el-dialog>


</div>

<script src="js/vue.js"></script>
<!-- Jquery Js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
<script src="js/common.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    var vm = new Vue({
        el : "#ServeType",
        data : {
            form : {
                parentId : '',
                typeName : '',
                typeDesc : ''
            },
            options: '',
            dialogFormVisible : false,
            typeList : [],
            activeIndex2: '1',
            // 左侧菜单数据
            menuList: [],
            // 是否折叠
            isCollapse: false,
            // 被激活的链接地址
            activePath: ''
        },

        created() {
            this.getList();
            this.getTypeParent();
            this.getMenuList()
            this.activePath = window.localStorage.getItem('activePath')
        },
        methods: {

            getList(){
              const that = this;
              HttpGet("/type/getList",null,function(result){
                 if (result.result == true){
                     that.typeList = result.data;
                 }
              });
            },
            getTypeParent(){
              var that = this;
              HttpGet("/type/getParentIds",null,function (result) {
                  if (result.result == true){
                      that.options = result.data;
                  }
              })
            },
            getMenuList(){
                const that = this;
                HttpGet("/menu/getList",null,function(result){
                    if (result.result == true){
                        that.menuList = result.data;
                    }
                })
            },
            removeTypeById(id){
                const that = this;
                layer.confirm('您确定要删除吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    HttpPost("/type/delete/"+id,null,function(result){
                        if (result.result == true){
                            layer.msg("删除成功",{icon:1,time:1500},function(){
                                that.getList();
                                that.getTypeParent();
                            })
                        }else{
                            layer.msg("删除失败，请稍后重试......",{icon:2,time:1500});
                        }
                    })
                }, function(){});
            },
            addType(){
              const that = this;
              HttpPost("/type/add",that.form,function(result){
                  if (result.result == true){
                      layer.msg("添加成功",{icon:1,time:1500},function(){
                          that.dialogFormVisible = false;
                          for(let k of Object.keys(that.form)){
                              Vue.delete(that.form,k);
                          }
                          that.getList();
                          that.getTypeParent();
                      })
                  }else{
                      layer.msg("添加成功，请稍后重试......",{icon:2,time:1500});
                  }
              });
            },
            handleSelect(){},
            logout() {
                layer.msg("用户退出成功",{icon:1,time:1500},function () {
                    window.localStorage.clear()
                    window.location.href="AdminLogin.html";
                });
            },
            // 点击按钮，切换菜单的折叠与展开
            toggleCollapse() {
                this.isCollapse = !this.isCollapse
            },
            // 保存链接的激活状态
            saveNavState(activePath) {
                window.localStorage.setItem('activePath', activePath)
                this.activePath = activePath
                window.location.href = activePath;
            }
        }
    });

</script>
<style lang="less" scoped>
    .el-tag {
        margin: 7px;
    }

    .bdtop {
        border-top: 1px solid #eee;
    }

    .bdbottom {
        border-bottom: 1px solid #eee;
    }

    .vcenter {
        display: flex;
        align-items: center;
    }
</style>
</body>
</html>
